<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('编辑菜单')"/>
    <th:block th:include="include :: dtree_css"/>
</head>
<body class="x-admin-sm">
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">

            <div class="layui-form-item">
                <label for="menuTree" class="layui-form-label">
                    <span class="x-red">*</span>上级菜单
                </label>
                <div class="layui-input-block">
                    <input type="text" id="menuTree" required="" lay-verify="menuName"
                           autocomplete="off" class="layui-input" th:value="${sysMenu.parentName}">
                    <input type="text" hidden="true" id="parentId" name="parentId" th:value="${sysMenu.parentId}">
                </div>
            </div>


            <div class="layui-form-item">
                <label for="menuType" class="layui-form-label">
                    <span class="x-red">*</span>菜单类型
                </label>
                <div class="layui-input-block" id="menuType">
                    <input type="radio" name="menuType" value="M" title="目录" lay-filter="radioMenuTypeFilter"
                           th:checked="${sysMenu.menuType=='M'? true:false}">
                    <input type="radio" name="menuType" value="C" title="菜单" lay-filter="radioMenuTypeFilter"
                           th:checked="${sysMenu.menuType=='C'? true:false}">
                    <!--                    <input type="radio" name="menuType" value="F" title="按钮" lay-filter="radioMenuTypeFilter">-->
                </div>
            </div>


            <div class="layui-form-item">
                <label for="menuName" class="layui-form-label">
                    <span class="x-red">*</span>菜单名称
                </label>
                <div class="layui-input-block">
                    <input type="text" id="menuName" name="menuName" required="" lay-verify="menuName"
                           th:value="${sysMenu.menuName}"
                           autocomplete="off" class="layui-input">

                    <input type="text" hidden="true" id="menuId" name="menuId" th:value="${sysMenu.menuId}">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="url" class="layui-form-label">
                    <span class="x-red">*</span>请求地址
                </label>
                <div class="layui-input-block">
                    <input type="text" id="url" name="url" required="" lay-verify="queryUrl" th:value="${sysMenu.url}"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="perms" class="layui-form-label">
                    <span class="x-red">*</span>权限标识
                </label>
                <div class="layui-input-block">
                    <input type="text" id="perms" name="perms" required="" lay-verify="perms"
                           th:value="${sysMenu.perms}"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>控制其中权限标识 如:@RequiresPermissions("")
                </div>
            </div>


            <div class="layui-form-item">
                <label for="orderNum" class="layui-form-label">
                    <span class="x-red">*</span>显示顺序
                </label>
                <div class="layui-input-block">
                    <input type="text" id="orderNum" name="orderNum" required="" lay-verify="num"
                           th:value="${sysMenu.orderNum}"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label for="icon" class="layui-form-label">
                    <span class="x-red">*</span>图标
                </label>
                <div class="layui-input-block">
                    <input type="text" id="icon" name="icon" required="" lay-verify="icon" th:value="${sysMenu.icon}"
                           autocomplete="off" class="layui-input layui-icon" placeholder="选择图标">
                </div>
            </div>


            <div class="layui-form-item">
                <label for="visible" class="layui-form-label">
                    <span class="x-red">*</span>菜单状态
                </label>
                <div class="layui-input-block" id="visible">
                    <input type="radio" name="visible" value="0" title="显示" checked="true">
                    <input type="radio" name="visible" value="1" title="隐藏">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button class="layui-btn" lay-filter="add" lay-submit="">
                    修改
                </button>
            </div>
        </form>
    </div>
</div>
<script th:inline="javascript"> var ctx = [[@{/}]] </script>
<th:block th:include="include :: dtree_js"/>
<th:block th:include="include :: iconPicker_js"/>
<script>

    layui.use(['form', 'layer', 'dtree', 'iconPicker'],
        function () {
            let $ = layui.jquery;
            let form = layui.form;
            let layer = layui.layer;
            let dtree = layui.dtree;
            let iconPicker = layui.iconPicker;

            //自定义验证规则
            form.verify({
                menuName: function (value) {
                    if (value.length < 3) {
                        return '昵称至少得3个字符';
                    }
                    let tips;
                },

                // 请求路径查询
                queryUrl: function (value) {

                },
                perms: function (value) {

                },

            });


            //上级菜单 单击事件
            $("#menuTree").click(function () {

                layer.open({
                    type: 1,
                    title: '上级菜单',
                    area: ["500px", "80%"],
                    content: '<ul id="MenuTree" class="dtree" data-id="0"></ul>',
                    success: function (layero, index) {
                        deptTree = dtree.render({
                            elem: '#MenuTree',
                            url: ctx + 'system/menu/dTree',
                            method: 'POST',
                            dataStyle: "layuiStyle",  //使用layui风格的数据格式
                            dataFormat: "list",  //配置data的风格为list
                            icon: ["0", "5"],
                            checkbar: false,
                            initLevel: 5,
                            weight: '400',
                            // checkbarType: "all", // 默认就是all，其他的值为： no-all  p-casc   self  only
                            response: {
                                statusName: "code", //返回标识（必填）
                                statusCode: 0, //返回码（必填）
                                message: "msg", //返回信息（必填）
                                rootName: "data", //根节点名称（必填）
                                treeId: "id", //节点ID（必填）
                                parentId: "parentId", //父节点ID（必填）
                                title: "title", //节点名称（必填）
                            },
                            request: {
                                roleId: 0
                            },
                            success: function (data, ul, first) {

                                // console.log(data);
                            }

                        });

                        // 绑定节点的双击
                        dtree.on("nodedblclick('MenuTree')", function (obj) {
                            $("#parentId").val(obj.param.nodeId);
                            $("#menuTree").val(obj.param.context);
                            layer.close(index);
                        });

                    },


                });
            });


            //监听 单选按钮事件
            form.on('radio(radioMenuTypeFilter)', function (data) {
                // layer.msg("单选按钮被调用" + JSON.stringify(data.value));

                var menuType = data.value;
                if (menuType == "M") {
                    $("#url").parents(".layui-form-item").hide();
                    $("#perms").parents(".layui-form-item").hide();
                    $("#icon").parents(".layui-form-item").show();
                } else if (menuType == "C") {
                    $("#url").parents(".layui-form-item").show();
                    $("#perms").parents(".layui-form-item").show();
                    $("#icon").parents(".layui-form-item").show();
                } else if (menuType == "F") {
                    $("#url").parents(".layui-form-item").hide();
                    $("#perms").parents(".layui-form-item").show();
                    $("#icon").parents(".layui-form-item").hide();
                }
            })

            //图标选取
            iconPicker.render({
                // 选择器，推荐使用input
                elem: '#icon',
                // 数据类型：fontClass/unicode，推荐使用fontClass
                type: 'unicode',
                // 是否开启搜索：true/false，默认true
                search: false,
                // 是否开启分页：true/false，默认true
                page: true,
                // 每页显示数量，默认12
                limit: 12,
                // 点击回调
                click: function (data) {
                    console.log(JSON.stringify(data));
                    $('#icon').val(data.iconText);
                },
                // 渲染成功后的回调
                success: function (d) {
                    console.log(d);
                    $('#icon').val("&#xe66f;");
                }
            });


            //监听提交
            form.on('submit(add)',
                function (data) {
                    console.log(JSON.stringify(data));

                    $.ajax({
                        type: 'POST',
                        url: ctx + 'system/menu/editMenu',
                        data: data.field,
                        success: function (res) {
                            if (res.code == 0) {
                                //关闭当前frame
                                layer.msg("修改成功");
                                //表格刷新
                                parent.layui.treeGrid.reload("treeTableMenu");

                                xadmin.close();
                                // 可以对父窗口进行刷新
                                xadmin.father_reload();
                            } else {
                                layer.msg(res.msg);
                            }
                        }
                    });

                    return false;
                });

        });
</script>
</body>

</html>